<template>
  <div style="width: 100%">
    <div class="box">
      <div class="mark"></div>
      <div class="text">{{ data.text }}</div>
      <el-tooltip
        content="Top center"
        effect="light"
        placement="top"
        style="margin-left: 8px"
        ><template slot="content">
          <div style="display: flex; align-items: center; font-size: 18px">
            <div>{{ data.text }} =</div>
            <div class="formula">
              <div style="border-bottom: 1px solid #333">
                {{ data.numerator }}
              </div>
              <div>{{ data.denominator }}</div>
            </div>
            <div>X 100%</div>
          </div>
        </template>
        <i class="el-icon-question" style="color: rgb(118, 144, 229)"></i>
      </el-tooltip>
      <div style="color: rgb(118, 144, 229); margin-left: 8px">
        =
        {{
          showValue == 0
            ? "0%"
            : (showValue - 0) + "%"
        }}
      </div>
      <!-- <div>({{ data.numeratorValue + "/" + data.denominatorValue }})</div> -->
    </div>
  </div>
</template>
<script>
export default {
  props: {
    data: {
      default: () => {},
      type: Object,
    },
    showValue: {
      default: 0,
      type: Number
    }
  },
  data() {
    return {};
  },
};
</script>
<style scoped>
.box {
  width: 100%;
  height: 60px;
  border: 8px;
  background: #f6f6f6;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 16px;
  margin-bottom: 16px;
}
.mark {
  width: 4px;
  height: 24px;
  background: rgb(78, 139, 252);
  border-radius: 2px;
}
.text {
  color: #333;
  margin-left: 16px;
}
.formula {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 8px;
}
</style>
